{% extends 'header.html' %}
{% block title  %}
	注册
{% endblock %}
{% block js %}
    <script src="{% static 'js/register.js' %}"></script>
    <script>

    window.onload = function (){

        //验证码请求
        $('#captcha').click(function (){
            let email = $('#InputEmail').val()
            let prompt = $('#prompt')
            if(!email){
                prompt.text("请输入邮箱")
                return
            }
            $.ajax({
                url:"{% url 'userAuth:mailIdentifyApi'%}",
                type:'get',
                dataType:'json',
                data:{'email':email},
                headers:{
                    "X-CSRFToken": "{{ csrf_token }}"
                },
                success:function (response){
                    if(response.code === 200){
                        delayed(prompt,"验证码已发送",5000)
                        btn_disabled('#captcha',"重发验证码","获取验证码")
                    }else{
                        delayed(prompt,response.msg,5000)
                    }
                },
                error:function (response){
                    delayed(prompt,"客户端出错,请重试",5000)
                }
            })
        })
        $('#registry').click(function (){
            let data = {
                'account':$('#InputAccount').val(),
                'password':$('#InputPassword').val(),
                'email':$('#InputEmail').val(),
                'captcha':$('#InputCaptcha').val()
            }
            $.ajax({
                url:'{% url 'userAuth:registerApi' %}',
                type:'post',
                dataType: 'json',
                data:data,
                headers:{
                    "X-CSRFToken": "{{ csrf_token }}"
                },
                success:function (response){
                    let prompt = $('#prompt')
                    if(response.code === 200){
                        delayed(prompt,"注册成功,3秒后跳转到登录界面",5000)
                        window.location.href = '{% url 'userAuth:login' %}'
                    }else{
                        let $error = $(response.msg)
                        let captcha = response.msg.captcha[0]
                        if(captcha){
                            delayed(prompt,"注册失败,验证码错误",5000)
                            return
                        }
                        let email = response.msg.email[0]
                        if(email){
                            delayed(prompt,"注册失败,邮箱已注册",5000)
                        }
                    }
                },
                error:function (response){
                    let prompt = $('#prompt')
                    delayed(prompt,"错误",5000)
                }
            })
        })
    }
    </script>
{% endblock %}
{% block main %}
	<div style="max-width: 400px" class="container-sm m-auto my-5">
        <h1 class="mb-5">请注册</h1>
        <form>
            {% csrf_token %}
          <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">账号</label>
            <input type="text" class="form-control" id="InputAccount" aria-describedby="emailHelp">
          </div>
          <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">邮箱</label>
            <input type="email" class="form-control" id="InputEmail" aria-describedby="emailHelp">
          </div>
          <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">密码</label>
            <input type="password" class="form-control" id="InputPassword">
          </div>
          <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">验证码</label>
            <div class="input-group mb-2">
                <input type="text" placeholder="请输入验证码" class="form-control" id="InputCaptcha" aria-describedby="emailHelp">
                <button class="btn btn-outline-secondary" type="button" id="captcha">获取验证码</button>
            </div>
            <span class="text-secondary" id="prompt"></span>
          </div>
          <div class="mb-3 mt-5">
              <button type="button" id="registry" class="btn btn-primary w-100">注册</button>
          </div>
        </form>
    </div>

{% endblock %}